<template>
	<view class="content display displayColumn displaycenter_aliem fontSize font_comm width-100">
		<u-navbar @rightClick="rightClick" :autoBack="true"  :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title" >油枪管理</text>
			</template>
		</u-navbar>
		
		<view class="fn_all display  displayColumn displaycenter_jus M-T30" v-if="false">
			<view class="item_one display  width-100 displaycenter_aliem ">
				<span class="fn_nnm1 M-L24">所属加油站</span>
				<view class="display displaycenter_aliem M-R24" @click="flag=true">
					<span class="fn_nnm2">请选择加油站 </span>
					<uni-icons type="right" color="#72778A" size="15"></uni-icons>
				</view>
			</view>
			<!-- <view class="liness M-L24 M-T24">
			</view> -->
			<view class="item_one display  width-100 displaycenter_aliem M-T24">
				<span class="fn_nnm1 M-L24">选择油号</span>
				<view class="changesSele display  displaycenter_aliem M-R24">
					<block v-for="(item,index) in arr" :key="index">
						<view class="ones display  all_item" :style="{border:selectIndex==index?'1rpx solid #126BC9' :'1rpx solid #7a7a7a'  }" @click="selectIndex=index">
							<view class="fn_sidfs display " v-if="selectIndex==index">
								
							</view>
						</view>
						<span class="fn_jiuwu" style="margin-left: 8rpx;">{{item}}</span>
					</block>
				</view>
			</view>
		</view>
		<!-- 油枪编号 -->
		<view class="display displayColumn width-100  M-T36" style="text-align: left;">
			<span class="fn_youqiangbianhao M-L30">油枪编号</span>
			<view class="fn_kong display  displayColumn M-T20 M-L30">
				<view class="fn_one display  displaycenter_aliem M-T24">
					<input type="text" class="fn_inpusfs M-L24" v-model="valuess" placeholder-class="fn_inpusfs1" placeholder="请输入" />
					<button class="fn_byns1 display all_item" style="margin-left: 40rpx;" @click="zhengjia">添加</button>
				</view>
				<view class="fn_two display  displaycenter_aliem M-T24 " v-for="(item,index) in arr1" :key="index">
					<input type="text" class="fn_inpusfs M-L24" :disabled="true" v-model="item.name" placeholder-class="fn_inpusfs1" placeholder="请输入" />
					<button class="fn_delete display all_item" style="margin-left: 40rpx;" @click="dels(index)">删除</button>
					<!-- <button class="fn_byns1 display all_item M-L20 ">添加</button> -->
				</view>
			</view>
		</view>
		<u-popup :show="flag" mode="bottom" round="20" :safeAreaInsetBottom="false">
			<view class="display  popup_all displayColumn">
				<view class="title_delete display displaycenter_aliem ">
					<span class="fontSize font_comm lingqu_txt">选择领取门店</span>
					<uni-icons class="delete_icon " style="z-index: 1000000;" type="closeempty" size="24"
						@click="closeOpen"></uni-icons>
				</view>
				<scroll-view class="display displayColumn" scroll-y="true" style="height: 800rpx;"
					@scrolltolower="scrolltolower" lower-threshold="50">
					<!-- 隔离 -->
					<view class="display " style="width: 100%;height: 72rpx;"></view>
					<view class="one display  all_item" v-for="(item,index) in addressArr" :key="index">
						<detailsVue @fatherMethod="fatherMethod" :item="item"></detailsVue>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<view class="width-100  fn_nulls display  all_item" >
			<button class="fn_btn_bottoms" @click="add">保存</button>
		</view>
	</view>
</template>
<script>
	import detailsVue from './details.vue';
	export default {
		data() {
			return {
				value1:false,
				flag:false,
				addressArr:[],
				arr:['92#','95#','0#'],
				selectIndex:0,
				arr1:[],
				id:1,
				valuess:'',
				ids:'',
				
			}
		},
		onLoad(options) {
			console.log(options)
			this.ids = options.id;
			
			if(options.moos=='undefined'||uni.$u.test.isEmpty(options.moos)){
				this.arr1=[]
			}else{
				options.moos.split(',').forEach(item=>{
					this.arr1.push({name:item})
				})
			}
			  
			
			this.getLists();
		},
		methods: {
			//删除
			dels(index){
				
				
				this.arr1  = this.arr1.slice(0, index).concat(this.arr1.slice(index + 1));
				console.log(this.arr1); // [1, 2, 4, 5]
			},
			zhengjia(){
				
				if(this.valuess==''){
					this.$modal.msg('油枪编号不能为空')
					return false;
				}
				this.id = this.id++
				let data = {
					name:this.valuess,
					id:this.id
				}
				this.arr1.push(data)
				this.valuess=''
			},
			closeOpen(){
				this.flag = false;
			},
			add(){
				
				let args = [];
				this.arr1.forEach(item=>{
					args.push(item.name)
				})
				this.$modal.loading('加载中')
				let data = {
					id:this.ids,
					gunNames:args.join(',')
				}
				console.log(data);
				this.$req.put('/xcx/petrolProduct',data).then(res=>{
					console.log(res)
					this.$modal.closeLoading();
					if(res.data.code==200){
						uni.navigateBack()
					}else{
						this.$modal.msg(res.data.msg)
					}
				})
			},
			getLists() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						let data = {
							lng: res.longitude,
							lat: res.latitude
						}
						that.$req.get('/xcx/station/list/stations', data).then(res => {
							
							res.data.rows.forEach(item => {
								that.$set(item, 'flag', false)
							})
							that.addressArr = res.data.rows;
			
							console.log(that.addressArr)
						})
					}
				});
			
			},
		}
	}
</script>
<style scoped lang="scss">
	.popup_all {
		width: 100%;
		height: 800rpx;
		.title_delete {
			position: absolute;
			width: 100%;
			height: 32rpx;
			background: #fff;
			top: 40rpx;
			justify-content: center;
			.lingqu_txt {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				justify-self: center;
			}
			.delete_icon {
				position: absolute;
				// justify-self: flex-end;
				right: 40rpx;
			}
		}
		.one {
			width: 100%;
			height: 120rpx;
		}
	}
.fn_all{
	width: 690rpx;
	// height: 264rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.fn_jiuwu{
	font-weight: 600;
	font-size: 28rpx;
	color: #212121;
}
.fn_nulls{
	position: fixed;
	bottom: 108rpx;
}
.fn_btn_bottoms{
	width: 690rpx;
	height: 66rpx;
	background: #126BC9;
	border-radius: 44rpx 44rpx 44rpx 44rpx;
	font-weight: 600;
	font-size: 24rpx;
	color: #FFFFFF;
}
.ones{
	width: 36rpx;
	height: 36rpx;
	
	border-radius: 50%;
}
.fn_sidfs{
	width: 24rpx;
	height: 24rpx;
	background: #126BC9;
	border-radius: 50%;
}
.fn_nnm1{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_nnm2{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.item_one{
	justify-content: space-between;
}
.liness{
	width: 642rpx;
	height: 0rpx;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	border: 1rpx solid #F6F6F6;
}
.fn_kong{
	width: 690rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.fn_youqiangbianhao{
	font-weight: 600;
	font-size: 32rpx;
	color: #000000;
}
.fn_inpusfs{
	width: 382rpx;
	height: 64rpx;
	background: #F6F6F6;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #000;
	padding-left: 24rpx;
}
.fn_inpusfs1{
	width: 382rpx;
	height: 64rpx;
	background: #F6F6F6;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_byns1{
	width: 100rpx;
	height: 64rpx;
	background: #126BC9;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 600;
	font-size: 24rpx;
	color: #FFFFFF;
}
.fn_delete{
	width: 100rpx;
	height: 64rpx;
	background: #C34439;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	font-weight: 600;
	font-size: 24rpx;
	color: #FFFFFF;
}
</style>
